<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - 航班乘客付费选座预测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-12 max-w-md">
        <header class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-800">航班乘客付费选座预测系统</h1>
            <p class="text-gray-600 mt-2">用户注册</p>
        </header>

        <div class="bg-white rounded-lg shadow-md p-8">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="mb-4 p-3 rounded-md {% if category == 'success' %}bg-green-100 text-green-700{% elif category == 'warning' %}bg-yellow-100 text-yellow-700{% else %}bg-red-100 text-red-700{% endif %}" id="auto-hide-alert">
                            {{ message }}
                        </div>
                    {% endfor %}

                    <script>
                        // 10秒后自动隐藏提示
                        const alertElements = document.querySelectorAll('#auto-hide-alert');
                        alertElements.forEach(element => {
                            setTimeout(() => {
                                element.style.opacity = '0';
                                element.style.transition = 'opacity 0.5s ease';
                                setTimeout(() => {
                                    element.remove();
                                }, 500);
                            }, 10000); // 10秒
                        });
                    </script>
                {% endif %}
            {% endwith %}

            <form action="/register" method="post" class="space-y-4">
                <div>
                    <label class="block text-gray-700 mb-1" for="username">用户名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="username" name="username" minlength="1" maxlength="8" required
                            class="w-full pl-10 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-极2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">用户名长度为1-8个字符</p>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 mb-1极" for="password">密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="password" name="password" minlength="6" required
                            class="w-full pl-10 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">密码至少6个字符</p>
                    </div>
                </div>

                <div>
                    <label class="block text-gray-700 mb-1" for="confirm_password">确认密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="confirm_password" name="confirm_password" required
                            class="w-full pl-10 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div class="text-center mt-6">
                    <button type="submit" 
                        class="bg-blue-600 text-white py-3 px-8 rounded-md hover:bg-blue-700 transition w-full">
                        <i class="fa fa-user-plus mr-2"></i>注册
                    </button>
                </div>
            </form>

            <div class="mt-6 text-center">
                <p class="text-gray-600">已有账号？ <a href="/login" class="text-blue-600 hover:underline">立即登录</a></p>
            </div>
        </div>
    </div>
</body>
</html>